<template>
  <div class="css-container">
    <FourBorder></FourBorder>
    <DynamicBorder></DynamicBorder>
    <RunBorder></RunBorder>
    <Danimation></Danimation>
    <Hexahedron></Hexahedron>
    <!-- <loading></loading> -->
  </div>
</template>

<script>
import FourBorder from "./components/fourBorder.vue";
import DynamicBorder from './components/dynamicBorder.vue'
import RunBorder from './components/runBorder.vue'
import Danimation from './components/3D-animation.vue'
import Hexahedron from './components/hexahedron.vue'
// import loading from './components/loading.vue'
export default {
  components:{
    Danimation,
    FourBorder,
    DynamicBorder,
    RunBorder,
    Hexahedron,
    // loading
  },
  data() {
    return {};
  },
  mounted() {
  },
  methods: {
    
  },
};
</script>

<style scoped lang="scss">
.css-container{
  display: flex;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
  justify-content: space-between;
  .container{
    width: 45%;
    min-height: 200px;
    margin-top: 30px;
    position: relative;
    border: 1px solid #e6e6e6;
  }
}
</style>
